<!--
* @des: 项目管理
* @date: 2021-12-05 11:45:45
* @version:  1.0
*
* Date                   Author               Description
* ------------------------------------------------------
* 2021-12-05             曹天笑               创建
-->

<template>
    <div class="map-manage">
        <div class="flex-block">
            <div class="item-block">
                <div class="title">设备在线率</div>
                <div class="deviceChartBox" id="deviceChart"></div>
            </div>
            <div class="item-block">
                <div class="title">今日工作日报</div>
                <div class="work-chart-list">
                    <div class="workChartBox" id="workChart1"></div>
                    <div class="workChartBox" id="workChart2"></div>
                </div>
            </div>
            <div class="item-block">
                <div class="title">员工统计</div>
                <div class="countChartBox" id="recodeChart"></div>
            </div>
        </div>
        <div class="project-manage center-block">
            <div class="project-count">
                <div class="project-count-item">
                    <div class="num-box">
                        <span class="num">19800</span>
                        <span class="unit">平方米</span>
                    </div>
                    <div class="name">总作业面积</div>
                </div>
                <div class="project-count-item">
                    <div class="num-box">
                        <span class="num">19800</span>
                        <span class="unit">个</span>
                    </div>
                    <div class="name">总设施数</div>
                </div>
                <div class="project-count-item">
                    <div class="num-box">
                        <span class="num">19800</span>
                        <span class="unit">人</span>
                    </div>
                    <div class="name">当前作业人数</div>
                </div>
            </div>
            <div class="map-pos-block">
                <div class="map-pos-item" style="left: 200px; top: 300px;">100</div>
            </div>
        </div>
        <div class="flex-block right-block">
            <div class="item-block">
                <div class="title">考勤统计</div>
                <div class="dutyChartBox" id="dutyChart"></div>
            </div>
            <div class="item-block">
                <div class="title">报警统计</div>
                <div class="alartChartBox" id="alartChart"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        const self = this
        // 设备在线统计
        const deviceMyChart = self.$echarts.init(document.getElementById('deviceChart'))
        const deviceData = [
            {
                name: '在线',
                value: 80
            },
            {
                name: '离线',
                value: 20
            }
        ]
        const deviceOption = {
            title: [
                {
                    text: '80%',
                    subtext: '在线',
                    x: '100px',
                    y: '60px',
                    textStyle: {
                        color: '#fff',
                        fontSize: 30,
                        fontWeight: 'normal'
                    },
                    subtextStyle: {
                        fontSize: 16,
                        color: '#28ca5a',
                        fontWeight: 'normal'
                    }
                }
            ],
            legend: {
                orient: 'vertical', // 布局方式，默认为水平布局，可选为：
                x: '60%',
                y: '10%',
                data: deviceData,
                padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
                // 接受数组分别设定上右下左边距，同css
                itemGap: 80, // 各个item之间的间隔，单位px，默认为10，
                // 横向布局时为水平间隔，纵向布局时为纵向间隔
                itemWidth: 24, // 图例图形宽度
                itemHeight: 14, // 图例图形高度
                textStyle: {
                    fontSize: 16,
                    color: '#fff' // 图例文字颜色
                },
                formatter: (name) => {
                    let str = ''
                    for (let i = 0; i < deviceData.length; i++) {
                        if (deviceData[i].name === name) {
                            str = name + '（' + deviceData[i].value + '）'
                        }
                    }
                    return str
                }
            },
            angleAxis: {
                max: 100,
                show: false,
                startAngle: 0
            },
            radiusAxis: {
                type: 'category',
                show: false
            },
            series: [
                {
                    name: '面积模式',
                    type: 'pie',
                    radius: [65, 75],
                    center: ['30%', '50%'],
                    label: {
                        show: false
                    },
                    data: [
                        {
                            value: 100 - 80,
                            name: '离线',
                            itemStyle: {
                                color: '#c65e42'
                            }
                        },
                        {
                            value: 100 - 20,
                            itemStyle: {
                                color: 'transparent'
                            }
                        }
                    ]
                },
                {
                    name: '面积模式',
                    type: 'pie',
                    radius: [60, 80],
                    center: ['30%', '50%'],
                    label: {
                        show: false
                    },
                    data: [
                        {
                            value: 100 - 80,
                            name: 'offline',
                            itemStyle: {
                                color: 'transparent'
                            }
                        },
                        {
                            value: 100 - 20,
                            name: '在线',
                            itemStyle: {
                                color: '#28ca5a'
                            }
                        }
                    ]
                }
            ]
        }
        deviceMyChart.setOption(deviceOption, true)
        // 今日工作日报
        const workMyChart1 = self.$echarts.init(document.getElementById('workChart1'))
        const workMyChart2 = self.$echarts.init(document.getElementById('workChart2'))
        const dataArr = 72
        const colorSet = '#36afe5' // 最外层表盘颜色
        const workOption = {
            series: [
                {
                    name: '内部阴影',
                    type: 'gauge',
                    radius: '55%',
                    splitNumber: 10,
                    axisLine: {
                        lineStyle: {
                            color: [
                                [
                                    dataArr / 100,
                                    self.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        {
                                            offset: 0,
                                            color: 'rgba(98,156,98,1)'
                                        },
                                        {
                                            offset: 0.5,
                                            color: 'rgba(98,156,98,1)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(98,156,98,1)'
                                        }
                                    ])
                                ],
                                [1, 'rgba(98,156,98,0)']
                            ],
                            width: 100
                        }
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    itemStyle: {
                        show: false
                    }
                },
                {
                    name: '内部小圆',
                    type: 'gauge',
                    // center: ['20%', '50%'],
                    radius: '55%',

                    splitNumber: 10,
                    axisLine: {
                        lineStyle: {
                            color: [
                                [dataArr / 100, '#94f4fb'],
                                [1, 'rgba(0,0,0,0)']
                            ],
                            width: 4
                        }
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    itemStyle: {
                        show: false
                    }
                },
                {
                    name: '外部刻度',
                    type: 'gauge',
                    //  center: ['20%', '50%'],
                    radius: '80%',
                    min: 0, //最小刻度
                    max: 100, //最大刻度
                    splitNumber: 5, //刻度数量
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: [[1, 'rgba(0,0,0,0)']]
                        }
                    }, //仪表盘轴线
                    axisLabel: {
                        show: false
                    }, //刻度标签。
                    axisTick: {
                        show: true,
                        splitNumber: 1,
                        lineStyle: {
                            color: '#36afe5'
                        },
                        length: -6
                    }, //刻度样式
                    splitLine: {
                        show: false,
                        length: -12,
                        lineStyle: {
                            color: '#36afe5' //用颜色渐变函数不起作用
                        }
                    }, //分隔线样式
                    detail: {
                        show: false
                    }
                },
                {
                    name: '内部进度条',
                    type: 'gauge',
                    // center: ['20%', '50%'],
                    radius: '80%',

                    splitNumber: 10,
                    axisLine: {
                        lineStyle: {
                            color: [
                                [dataArr / 100, colorSet],
                                [1, colorSet]
                            ],
                            width: 1
                        }
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    itemStyle: {
                        color: '#ffffff'
                    },
                    detail: {
                        formatter: function(value) {
                            if (value !== 0) {
                                var num = Math.round(value)
                                return parseInt(num).toFixed(0) + '%'
                            } else {
                                return 0
                            }
                        },
                        offsetCenter: [0, 85],
                        textStyle: {
                            padding: [0, 0, 0, 0],
                            fontSize: 30,
                            fontWeight: 600,
                            color: '#ffffff'
                        }
                    },
                    title: {
                        //标题
                        show: true,
                        offsetCenter: [0, 46], // x, y，单位px
                        textStyle: {
                            color: '#fff',
                            fontSize: 18, //表盘上的标题文字大小
                            fontWeight: 400,
                            fontFamily: 'MicrosoftYaHei'
                        }
                    },
                    data: [
                        {
                            name: '金东区',
                            value: dataArr,
                            itemStyle: {
                                color: '#ffffff',
                                fontFamily: 'MicrosoftYaHei',
                                fontSize: 16
                            }
                        }
                    ],
                    pointer: {
                        show: true,
                        length: '70%',
                        radius: '20%',
                        width: 3 //指针粗细
                    },
                    animationDuration: 4000
                },
                {
                    //指针上的圆
                    type: 'pie',
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false,
                    legendHoverLink: false,
                    radius: ['0%', '4%'],
                    center: ['50%', '50%'],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {
                            value: 120,
                            itemStyle: {
                                normal: {
                                    color: '#ffffff'
                                }
                            }
                        }
                    ]
                }
            ]
        }
        workMyChart1.setOption(workOption, true)
        workMyChart2.setOption(workOption, true)
        // 员工统计
        const recodeChart = self.$echarts.init(document.getElementById('recodeChart'))
        const recodeOption = {
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#52bd55'
                        },
                        {
                            offset: 1,
                            color: 'rgba(82,189,85, 0)'
                        }
                    ]
                },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#af7d4d'
                        },
                        {
                            offset: 1,
                            color: 'rgba(175,125,77, 0.8)'
                        }
                    ]
                }
            ],
            legend: {
                show: true,
                top: '20px',
                right: '0',
                itemWidth: 20,
                itemHeight: 14,
                itemGap: 16,
                textStyle: {
                    fontSize: 16,
                    color: '#fff'
                }
            },
            grid: {
                left: '10%',
                right: '0',
                top: '15%',
                bottom: '10%'
            }, //图表的位置
            xAxis: {
                name: '年龄',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff',
                        width: 1 //轴线宽
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                data: ['<30', '30-40', '40-60', '60-80']
            },
            yAxis: {
                name: '人数',
                axisLine: {
                    show: true, //坐标轴线显示与否
                    lineStyle: {
                        color: '#fff',
                        width: 1 //轴线宽
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: false
                }
            },
            series: [
                {
                    name: '男',
                    type: 'bar',
                    stack: '男',
                    barWidth: 24,
                    data: [10, 18, 50, 40]
                },
                {
                    name: '女',
                    stack: '女',
                    barWidth: 24,
                    type: 'bar', //换为line 实现折线与柱状图
                    data: [60, 34, 20, 10]
                }
            ]
        }
        recodeChart.setOption(recodeOption, true)
        // 出勤统计
        const dutyChart = self.$echarts.init(document.getElementById('dutyChart'))
        const dutyData = [
            {
                name: '迟到',
                value: 24
            },
            {
                name: '缺卡',
                value: 28
            },
            {
                name: '出勤',
                value: 45
            },
            {
                name: '缺勤',
                value: 78
            }
        ]
        const dutyOption = {
            color: ['#c57a7a', '#85cfbf', '#b4c181', '#32b1f3'],
            title: [
                {
                    text: 1000,
                    subtext: '总人数',
                    x: 'center',
                    y: '33%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 48,
                        lineHeight: 80
                    },
                    subtextStyle: {
                        fontSize: 30,
                        lineHeight: 60,
                        color: '#fff'
                    }
                },
                {
                    text: '—————————',
                    left: '49%',
                    top: '51%',
                    textAlign: 'center',
                    textStyle: {
                        top: 10,
                        fontSize: '14',
                        fontWeight: '400',
                        color: '#fff',
                        textAlign: 'center'
                    }
                }
            ],
            dataset: {
                source: dutyData
            },
            legend: {
                data: ['迟到', '缺卡', '出勤', '缺勤'],
                bottom: '1%',
                left: '1%',
                orient: 'vertical',
                itemGap: 24,
                itemHeight: 14,
                formatter: (name) => {
                    return dutyData.map((item) => {
                        if (item.name === name) {
                            return [`{a|${item.value}%}`, `{b|${name}}`].join(',')
                        }
                    })
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: ['60%', '80%'],
                    encode: {
                        tooltip: ['name', 'value'],
                        value: 'value'
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            shadowColor: '#0284f8',
                            shadowBlur: 50
                        }
                    },
                    label: {
                        show: false
                    }
                },
                {
                    type: 'pie',
                    radius: ['45%', '57%'],
                    data: [
                        {
                            label: {
                                show: false
                            },
                            labelLine: {
                                normal: {
                                    smooth: true,
                                    lineStyle: {
                                        width: 0
                                    }
                                }
                            },
                            value: 0,
                            show: false,
                            hoverAnimation: false,
                            itemStyle: {
                                color: '#184b84',
                                emphasis: {
                                    // 鼠标移入不高亮
                                    color: '#eee'
                                }
                            }
                        }
                    ]
                }
            ]
        }
        dutyChart.setOption(dutyOption, true)
        // 报警统计
        const alartChart = self.$echarts.init(document.getElementById('alartChart'))

        const alartOption = {
            color: ['#34f3ce', '#b4c181'],
             title: [
                {
                    text: '今日报警67次，未处理6次',
                    x: '235px',
                    y: 0,
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                        fontWeight: 'normal'
                    }
                }
            ],
            grid: {
                left: '12%',
                right: '10%',
                top: '25%',
                bottom: '30px'
            },
            legend: {
                show: true,
                icon: 'circle',
                top: '30px',
                right: '20px',
                itemWidth: 25,
                itemHeight: 10,
                itemGap: 25,
                textStyle: {
                    fontSize: 16,
                    color: '#fff'
                }
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    color: '#fff'
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value',
                name: '报警次数',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 18,
                    lineHeight: 40
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff',
                        fontSize: 14
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#556a98'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            series: [
                {
                    name: '血压',
                    data: [2, 1, 3, 2, 1, 2, 5],
                    type: 'line',
                    smooth: true
                },
                {
                    name: '心率',
                    data: [1, 3, 2, 3, 1, 2, 3],
                    type: 'line',
                    smooth: true
                }
            ]
        }
        alartChart.setOption(alartOption, true)
    }
}
</script>
